import React from 'react';
import { Col } from 'antd';
import { ColProps as AntdColProps } from 'antd/lib/col';
import classNames from 'classnames';
import useQueryControlWrap from '../../hooks/useQueryControlWrap';
import { CanvasItemProps } from './../../interface';
import styles from './col.module.scss';

const pd = { padding: '10px' };

const Td = (props: any) => {
  const span = props.span as number;
  const width = span / 24 * 100 + '%';

  return (
    <td
      {...props}
      data-parentchildren={props.childrenLen}
      className={styles.td}
      width={width} />
  );
};

export interface ColProps extends CanvasItemProps {
  colProps: AntdColProps & {
    tableStyle?: string;
    colStyle?: string;
    clearBorderTop?: boolean;
    clearBorderLeft?: boolean
  };
  children?: any;
}

export default (props: ColProps) => {
  const { isDesign, domComplete, colProps, ...canvasProps } = props;

  useQueryControlWrap(canvasProps.id, '', domComplete);

  let Component: any = Col;

  if (colProps.tableStyle && !isDesign) {
    Component = Td;
  }

  const children = props.children?.props?.children || [];
  
  let _style = isDesign ? pd : {};
  if(colProps.colStyle) {
    try {
      _style = {
        ..._style,
        ...JSON.parse(colProps.colStyle)
      }
    } catch (error) {}
  }

  return (
    <Component
      id={props._id}
      {...canvasProps}
      {...colProps}
      childrenLen={children.length}
      className={classNames(styles.row, {
        [styles.rowDesign]: isDesign
      })}
      style={_style}>
    </Component>
  );
};